<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插值语法</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
          <!-- 读取data属性显示 -->
          <h2>测评得分：{{ score }}</h2>
          <!-- 读取计算属性数据显示 -->
          <p>测评结果A：{{ resultText }}</p>
          <p>测评结果A：{{ resultText }}</p>
          <p>测评结果A：{{ resultText }}</p>
          <button @click="reExam">重新测评</button>
          <p>测评结果B：{{ getResultText() }}</p>
          <p>测评结果B：{{ getResultText() }}</p>
          <p>测评结果B：{{ getResultText() }}</p>
        </div>
        <script>
            const { createApp } = Vue
            // 模板中的变量读取数据的来源都是配置指定的data对象。
            createApp({
                data() {
                    return {
                        score: 69
                    }
                },

                // 配置对象computed。实际上这就是Vue中计算属性定义的位置，整个代理对象需要的计算属性都需要定义在computed配置对象中。
                computed: {
                    resultText() {
                        console.log('resultText计算属性被调用')
                        return this.score > 60 ? '及格' : '不及格'
                    }
                },

                // 计算属性内会将计算属性函数返回的结果数据进行缓存处理，如果结果数据需要在页面中显示多次，那么计算属性函数只会执行1次，但method方法会对应执行多次。
                // 这样对比下来，计算属性的效率明显要比方法高。
                methods: {
                    reExam() {
                        this.score -= 10
                    },

                    getResultText() {
                        console.log('getResultText方法被调用')
                        return this.score > 60? '及格' : '不及格'
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>